<template>
  <basic-layout>
    <view class="user-center">
      <!-- 顶部用户信息 -->
      <view class="user-header">
        <view class="user-info">
          <image class="avatar" :src="avatar" mode="aspectFill" />
          <text class="login-text">请先登录(商家)</text>
        </view>
        <image
          class="qr-icon"
          :src="qrcodeIcon"
          mode="aspectFit"
          @tap="clickCode"
        />
      </view>

      <cut />

      <!-- 订单功能区 -->
      <view class="function-section">
        <view class="section-title">我的订单</view>
        <view class="order-grid">
          <view class="order-item" v-for="item in orderItems" :key="item.text">
            <image class="icon" :src="item.icon" mode="aspectFit" />
            <text>{{ item.text }}</text>
          </view>
        </view>
      </view>

      <!-- 优惠券功能区 -->
      <view class="function-section">
        <view class="section-title">我的优惠券</view>
        <view class="coupon-grid">
          <view
            class="coupon-item"
            v-for="item in couponItems"
            :key="item.text"
          >
            <image class="icons" :src="item.icon" mode="aspectFit" />
            <text>{{ item.text }}</text>
          </view>
        </view>
      </view>

      <!-- 设置功能区 -->
      <view class="function-section">
        <view class="section-title">其他服务</view>
        <view class="service-list">
          <view
            class="service-item"
            v-for="item in serviceItems"
            :key="item.text"
          >
            <image class="icon" :src="item.icon" mode="aspectFit" />
            <text class="title">{{ item.text }}</text>
            <image class="arrow" :src="arrowIcon" mode="aspectFit" />
          </view>
        </view>
      </view>
    </view>
  </basic-layout>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import Taro from "@tarojs/taro";

import cut from "./business-cut.vue";
import BasicLayout from "@/layouts/basic-layout.vue";
// import avatarImg from "@/assets/imgs/img.png";
import qrcodeIcon from "@/assets/imgs/code.svg";
import arrowIcon from "@/assets/imgs/right.svg";

// 订单图标
import pendingPaymentIcon from "@/assets/imgs/wall.svg";
import tosendIcon from "@/assets/imgs/wait.svg";
// import logisticsIcon from "@/assets/imgs/auto.svg";
import afterSaleIcon from "@/assets/imgs/hexiao.svg";
// import moreIcon from "@/assets/imgs/more.svg";

// 优惠券图标
// import couponIcon from "@/assets/imgs/hexiaoma.svg";
import usedIcon from "@/assets/imgs/wangdian.svg";
// import expiredIcon from "@/assets/imgs/tuijian.svg";
// import giftIcon from "@/assets/imgs/gift.svg";

// 服务图标
import deleteIcon from "@/assets/imgs/setting.svg";
import feedbackIcon from "@/assets/imgs/yijian.svg";
import questionIcon from "@/assets/imgs/wenti.svg";
import infoIcon from "@/assets/imgs/we.svg";
import protectIcon from "@/assets/imgs/xiyi.svg";
import groupIcon from "@/assets/imgs/team.svg";
import locationIcon from "@/assets/imgs/addr.svg";
import serviceIcon from "@/assets/imgs/server.svg";

const avatar = ref("https://cdn.tjkximg.com/content/zhangtang/images/mtjx.jpg");

// definePageConfig({
//   navigationBarTitleText: "商家",
//   navigationStyle: "custom",
// });

Taro.setNavigationBarTitle({
  title: '商家'
})

const orderItems = ref([
  { icon: tosendIcon, text: "核销记录" },
  { icon: afterSaleIcon, text: "扫码记录" },
  { icon: pendingPaymentIcon, text: "提现记录" },
  // { icon: afterSaleIcon, text: "扫描订单" }
]);

const couponItems = ref([
  { icon: usedIcon, text: "店铺名称" },
  { icon: usedIcon, text: "店铺地址" },
  { icon: usedIcon, text: "店铺图片" },
  { icon: usedIcon, text: "地图位置" },
]);

const serviceItems = ref([
  { icon: deleteIcon, text: "清空缓存" },
  { icon: feedbackIcon, text: "意见反馈" },
  { icon: questionIcon, text: "常见问题" },
  { icon: infoIcon, text: "关于我们" },
  { icon: protectIcon, text: "隐私协议" },
  { icon: groupIcon, text: "我的团队" },
  { icon: locationIcon, text: "收货地址" },
  { icon: serviceIcon, text: "联系客服" },
]);

const clickCode = () => {
  //判断路径是 /pages/my/business 就切换到  /pages/my/index 否则就切换到 /pages/my/business
  const pages = Taro.getCurrentPages();
  console.log("pages", pages);
  const currentPage = pages[pages.length - 1];
  const path = currentPage.route;
  console.log("path", path);
  if (path?.includes("pages/my/business")) {
    Taro.redirectTo({
      url: "/pages/my/index",
    });
  } else {
    Taro.redirectTo({
      url: "/pages/my/business",
    });
  }
};
</script>

<style lang="scss">
.basic-layout__content {
  width: 750rpx;
}
.user-center {
  min-height: 100vh;
  background: linear-gradient(180deg, #f6f9ff 0%, #ffffff 100%);
  padding-bottom: 100rpx;

  // 顶部用户信息
  .user-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 60rpx 40rpx 40rpx;

    .user-info {
      display: flex;
      align-items: center;

      .avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        margin-right: 30rpx;
        background-color: #eee;
      }

      .login-text {
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
      }
    }

    .qr-icon {
      width: 40rpx;
      height: 40rpx;
    }
  }

  // 资产区域
  // .assets-section {
  //   display: flex;
  //   background: #f9e6e693;
  //   margin: 0 30rpx;
  //   border-radius: 20rpx;
  //   padding: 40rpx 0;
  //   box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);

  //   .asset-item {
  //     flex: 1;
  //     text-align: center;

  //     .label {
  //       display: block;
  //       font-size: 28rpx;
  //       color: #b9551b;
  //       margin-bottom: 16rpx;
  //     }

  //     .value {
  //       font-size: 40rpx;
  //       font-weight: 600;
  //       color: #333;

  //       .unit {
  //         font-size: 28rpx;
  //         margin-left: 4rpx;
  //       }
  //     }
  //   }
  // }

  // 功能区通用样式
  .function-section {
    background: #fff;
    margin: 30rpx;
    border-radius: 20rpx;
    padding: 0 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);

    .section-title {
      padding: 30rpx 0;
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      border-bottom: 1rpx solid #f5f5f5;
    }

    // 订单网格
    .order-grid {
      display: flex;
      padding: 30rpx 0;

      .order-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;

        .icon {
          width: 48rpx;
          height: 48rpx;
        }

        text {
          margin-top: 16rpx;
          font-size: 26rpx;
          color: #666;
        }
      }
    }

    // 优惠券网格
    .coupon-grid {
      display: flex;
      flex-wrap: wrap;
      padding: 20rpx 0;

      .coupon-item {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20rpx 0;

        .icon {
          width: 48rpx;
          height: 48rpx;
        }

        text {
          margin-top: 16rpx;
          font-size: 26rpx;
          color: #666;
        }
      }
    }

    // 服务列表
    .service-list {
      .service-item {
        display: flex;
        align-items: center;
        padding: 30rpx 0;
        position: relative;

        &::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          height: 1rpx;
          background-color: #f5f5f5;
        }

        .icon {
          width: 36rpx;
          height: 36rpx;
          margin-right: 20rpx;
        }

        .title {
          flex: 1;
          font-size: 28rpx;
          color: #333;
        }

        .arrow {
          width: 24rpx;
          height: 24rpx;
        }
      }
    }
  }
}
.icons {
  width: 48rpx;
  height: 48rpx;
}

.cps-all {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .cps-item {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .c-label {
    font-size: 24rpx;
    color: #666;
  }
}
</style>
